<template>
  <div ref="ellipse" :style="contentStyle"></div>
</template>
<script>
  export default {
    name: 'Ellipse',
    props: {
      containerSize: {type: Object},
      containerStyle: {type: Object}
    },
    data: function () {
      return {
        // ellipseRadius: null
      }
    },
    mounted: function () {
      this.init()
    },
    watch: {
      containerSize: function () {
        this.init()
      }
    },
    computed: {
      contentStyle: function () {
        let style = {...this.containerStyle}
        // style.width = `calc(100% - ${
        //   style['border-width'] ? parseInt(style['border-width']) * 2 : 0
        // }px)`
        // style.height = `calc(100% - ${
        //   style['border-width'] ? parseInt(style['border-width']) * 2 : 0
        // }px)`
        // style['border-radius'] = this.ellipseRad
        style.width = `100%`
        style.height = `100%`
        style['border-radius'] = `50%`
        return style
      }
    }
    // methods: {
    //   init: function () {
    //     this.$nextTick(function () {
    //       this.ellipseRadius = `${this.$refs.ellipse.offsetWidth / 2}px /
    //             ${this.$refs.ellipse.offsetHeight / 2}px`
    //     })
    //   }
    // }
  }
</script>
<style>

</style>
